
import style from './Footer.module.scss'
import { Link } from 'react-router-dom'
import { useSelector,useDispatch } from 'react-redux'
import type { RootState, AppDispatch } from '../../../store'
import { changeChecked } from '../../../store/models/food'
const Footer = () => {
  const dispatch:AppDispatch = useDispatch()
  const selected = useSelector((state: RootState) => state.food.selected)
  console.log(selected)





  return (
    <div className={style.footer}>
      <header>
        <p>已选择{selected.length}种</p>
        <Link to='./compare'>去测评</Link>
      </header>
      <div className={style.list}>
        {selected.map(item => 
          <p key={item.name} onClick={() => dispatch(changeChecked(item.name))}>{item.name}</p>
        )}
      </div>
    </div>
  )
}

export default Footer